<template>
	<view class="content">
		<!-- #ifdef MP-WEIXIN -->
		<!-- 搜索框 -->
		<Search></Search>
		<!-- #endif -->
		<!-- 轮播图 -->
		<Banner :bannerList='bannerList'></Banner>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
			:up="upOption">
			<!-- 分类 -->
			<Categorize :cateList='cateList'></Categorize>
			<!-- 几个列表 -->
			<view class="common_list">
				<course-item name="热门推荐" word='Hot' :List='hotList'></course-item>
				<scroll-course name="近期上新" word='NEW' :List='newList'></scroll-course>
				<course-item name="免费精选" word='FREE' :List='freeList'></course-item>
				<pay-item name="付费精品" word='NICE' :List='payList'></pay-item>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import api from '@/api/course.js'
	import Search from '@/components/common/Search/Search'
	import Banner from '@/components/common/Banner/Banner'
	import Categorize from '@/components/common/Categorize/Categorize'
	import courseItem from '@/components/common/course-item/course-item'
	import payItem from '@/components/common/pay-item/pay-item'
	import scrollCourse from '@/components/common/scroll-course/scroll-course'
	// import courseTitle from '@/components/common/course-title/course-title'
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				//轮播图数据
				bannerList: [],
				// 分类数据
				cateList: [],
				courseList: [{
					id: 1,
					image: '/static/images/banner2.jpg',
					totalTime: '00:59:08',
					title: 'SpringBoot项目实战教程',
					nickName: '梦老师1', // 课程老师
					isFree: 0, //是否免费：0收费，1免费
					priceOriginal: 999, // 原价
					priceDiscount: 699.9, // 优惠价
					studyTotal: 899,
				}, ],
				hotList: [],
				newList: [],
				freeList: [],
				payList: [],
				downOption: {},
				upOption: {
					page: {
						num: 0,
						size: 10 // 每页数据的数量,默认10
					}
				},
			}
		},
		onLoad() {
			// #ifdef APP-PLUS
			// 搜索框提示信息，只在APP中有aa
			this.placeholderData()
			// #endif
			// this.loadBannerData()
			// this.CategoryList()
			// this.loadHotCourseData()
			// this.loadNewCourseData()
			// this.loadFreeCourseData()
			// this.loadPayCourseData()
		},
		//点击扫码按钮触发的事件
		onNavigationBarButtonTap(e) {
			if (e.index == 0) {
				uni.scanCode({
					success: function(res) {
						console.log('条码内容：' + res.result);
						uni.navigateTo({
							url: '/pages/Web/Web?' + res.result
						});
					}
				});
			}
			console.log(e)
		},
		// 点击搜索跳转
		onNavigationBarSearchInputClicked() {
			uni.navigateTo({
				url: '/pages/common-search/common-search'
			});

		},

		components: {
			Search,
			Banner,
			Categorize,
			courseItem,
			scrollCourse,
payItem
			// swiperCourse,
			// courseTitle

		},
		methods: {
			//搜索框内容切换
			placeholderData() {
				let webview = this.$scope.$getAppWebview();
				let arr = ['APP · 微信小程序', 'Java · SprinBoot', 'SpringCloud ·SpringSecurity', 'Vue · React'];
				// 设置页面搜索的默认数据
				let i = 0;
				webview.setStyle({
					'titleNView': {
						"searchInput": {
							"placeholder": arr[i]
						}
					}
				})
				setInterval(() => {
					// 定时循环显示每个元素，3最后一个元素，又从0第1个元素开始
					i = i < 3 ? ++i : 0;
					webview.setStyle({
						'titleNView': {
							"searchInput": {
								"placeholder": arr[i]
							}
						}
					})
				}, 3000)
			},
			//轮播图的数据
			async loadBannerData() {
				// 不要少了 await, 位置1的广告
				const {
					data
				} = await api.getAdvertList(1)
				this.bannerList = data
			},
			//获取分类方的数据
			async CategoryList() {
				const res = await api.getCategoryList()
				this.cateList = res.data
			},
			// 热门推荐, 只要查询第1页，8条即可
			async loadHotCourseData() {
				const {
					data
				} = await api.getList({
					sort: 'hot'
				}, 1, 8)
				this.hotList = data.records
			},
			// 上新
			async loadNewCourseData() {
				const {
					data
				} = await api.getList({
					sort: 'new'
				}, 1, 8)
				this.newList = data.records
			},
			// 免费
			async loadFreeCourseData() {
				const {
					data
				} = await api.getList({
					isFree: 1
				}, 1, 10)
				this.freeList = data.records
			},
			// 付费
			async loadPayCourseData() {
				const {
					data
				} = await api.getList({
					isFree: 0
				}, 1, 5)
				this.payList = data.records
			},
			downCallback() {
				this.mescroll.resetUpScroll();
			},
			async upCallback(page) {
				if (page.num == 1) {
					this.loadBannerData()
					this.CategoryList()
					this.loadHotCourseData()
					this.loadNewCourseData()
					this.loadFreeCourseData()
				}

				let response = await api.getList({
					isFree: 0
				}, page.num, page.size)
				let curList = response.data.records

				if (page.num == 1) this.payList = []

				this.payList = this.payList.concat(curList);
			

				this.mescroll.endBySize(curList.length, response.data.total);
			}
		}
	}
</script>

<style>
	.common_list {
		padding: 0 10px;
	
	}
</style>
